import React, { useState } from 'react';
import './Canvas.css';

const Canvas: React.FC = () => {
  const [selectedTool, setSelectedTool] = useState('select');
  const [canvasElements, setCanvasElements] = useState<any[]>([]);

  const tools = [
    { id: 'select', icon: '↖️', label: '选择' },
    { id: 'rectangle', icon: '⬜', label: '矩形' },
    { id: 'circle', icon: '⭕', label: '圆形' },
    { id: 'text', icon: '📝', label: '文字' },
    { id: 'image', icon: '🖼️', label: '图片' }
  ];

  const layers = [
    { id: 1, name: '背景层', visible: true, locked: false },
    { id: 2, name: '家具层', visible: true, locked: false },
    { id: 3, name: '装饰层', visible: false, locked: true }
  ];

  const handleToolSelect = (toolId: string) => {
    setSelectedTool(toolId);
  };

  const handleCanvasClick = (e: React.MouseEvent) => {
    if (selectedTool === 'rectangle') {
      const rect = e.currentTarget.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      const newElement = {
        id: Date.now(),
        type: 'rectangle',
        x: x - 25,
        y: y - 25,
        width: 50,
        height: 50,
        color: '#667eea'
      };
      
      setCanvasElements([...canvasElements, newElement]);
    }
  };

  return (
    <div className="canvas-content">
      <div className="canvas-header">
        <h1>设计画布</h1>
        <div className="header-actions">
          <button className="action-btn">
            <span className="btn-icon">💾</span>
            保存
          </button>
          <button className="action-btn">
            <span className="btn-icon">📤</span>
            导出
          </button>
        </div>
      </div>

      <div className="canvas-workspace">
        <div className="canvas-sidebar">
          <div className="tool-panel">
            <h3>工具</h3>
            <div className="tool-list">
              {tools.map(tool => (
                <button
                  key={tool.id}
                  className={`tool-item ${selectedTool === tool.id ? 'active' : ''}`}
                  onClick={() => handleToolSelect(tool.id)}
                  title={tool.label}
                >
                  <span className="tool-icon">{tool.icon}</span>
                  <span className="tool-label">{tool.label}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="layers-panel">
            <h3>图层</h3>
            <div className="layers-list">
              {layers.map(layer => (
                <div key={layer.id} className="layer-item">
                  <div className="layer-info">
                    <span className="layer-name">{layer.name}</span>
                  </div>
                  <div className="layer-controls">
                    <button 
                      className={`layer-btn ${layer.visible ? 'active' : ''}`}
                      title={layer.visible ? '隐藏' : '显示'}
                    >
                      👁️
                    </button>
                    <button 
                      className={`layer-btn ${layer.locked ? 'active' : ''}`}
                      title={layer.locked ? '解锁' : '锁定'}
                    >
                      🔒
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="canvas-main">
          <div className="canvas-area" onClick={handleCanvasClick}>
            <div className="canvas-grid">
              {canvasElements.map(element => (
                <div
                  key={element.id}
                  className="canvas-element"
                  style={{
                    left: element.x,
                    top: element.y,
                    width: element.width,
                    height: element.height,
                    backgroundColor: element.color
                  }}
                />
              ))}
            </div>
          </div>
        </div>

        <div className="canvas-properties">
          <div className="properties-panel">
            <h3>属性</h3>
            <div className="property-group">
              <label>位置</label>
              <div className="property-inputs">
                <input type="number" placeholder="X" />
                <input type="number" placeholder="Y" />
              </div>
            </div>
            <div className="property-group">
              <label>大小</label>
              <div className="property-inputs">
                <input type="number" placeholder="宽" />
                <input type="number" placeholder="高" />
              </div>
            </div>
            <div className="property-group">
              <label>颜色</label>
              <input type="color" defaultValue="#667eea" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Canvas;
